<template>
  <div>
    <mheader></mheader>
    <div class="content">
      <Row type="flex" justify="center">
        <Col span="16">
        <Row class="breadcrumb">
          <Breadcrumb separator=">">
            <BreadcrumbItem to="/">首页</BreadcrumbItem>
            <BreadcrumbItem :to="'/list/'+concert.type">List</BreadcrumbItem>
            <BreadcrumbItem>{{concert.title}}</BreadcrumbItem>
          </Breadcrumb>
        </Row>
        <Row>
          <Card class="container">
            <div class="show-ticket">
              <div class="show-poster">
                <!-- <div class="discount">
                    <div class="ie9-discount-bg">
                        4.
                        <span class="small-number">5</span>
                        <div class="unit">折起</div>
                    </div>
                </div>-->
                <img class="poster" :src="concert.poster.imageBase" :alt="concert.title">
                <div class="show-count">
                  <Icon class="like" type="heart"></Icon>
                  <span id="favourNum">196</span>人想看 &nbsp;&nbsp;
                  <Icon type="star" size="18"></Icon>
                  {{showRate}}
                  <!-- <Icon class="seen" type="eye" size="19"></Icon>
              31960人浏览 -->
                </div>
              </div>
              <div class="show-info">
                <div class="show-title">
                  <h2 class="show-name">{{concert.title}}</h2>
                  <div class="show-tag-container">
                    <template v-for="item in concert.tags">
                      <mtag :tagv="item.name"></mtag>
                    </template>
                  </div>
                </div>
                <div class="show-desc">
                  {{concert.beginOn}}&nbsp;&nbsp;&nbsp;&nbsp;{{concert.place}}
                </div>

                <div class="innercontainer">
                  <div class="list-box">
                    <h4>
                      <p>选择场次</p>
                    </h4>
                    <div class="list list-normal">
                      <RadioGroup v-model="ticket.tSession" type="button">
                        <template v-for="cDate in concert.concertTime">
                          <template v-for="cTime in cDate.time">
                            <Radio :label="cDate.date+'-'+cTime">{{cDate.date}} {{cTime}}</Radio>
                          </template>
                        </template>
                      </RadioGroup>
                    </div>
                  </div>
                  <div class="list-box seatPlan">
                    <h4>
                      <p>选择票面</p>
                    </h4>
                    <div class="list list-normal overflow-visible">
                      <div class="list list-normal overflow-visible" id="sessionPar-container">
                        <RadioGroup v-model="ticket.tPrice" type="button" @on-change="changeTicket">
                          <template v-for="fv in concert.faceValues">
                            <Radio :label="fv.price">{{fv.name}}</Radio>
                          </template>
                        </RadioGroup>
                      </div>
                    </div>
                  </div>
                  <div class="list-box">
                    <h4>
                      <p>选择数量</p>
                    </h4>
                    <div class="list-normal book_row_num">
                      <div class="number-input-wrapper">
                        <InputNumber :max="10" :min="1" v-model="ticket.tNumber" :editable="false" @on-change="changeTicket"></InputNumber>
                      </div>
                      <div id="price-tip" class="price-tip" style="display: none;">
                        <div class="price-tip-content"></div>
                        <div class="pop-info-tip">
                          <div class="down-arrow-border"></div>
                          <div class="down-arrow"></div>
                          <!-- <div class="tip-content">
                      </div> -->
                        </div>
                      </div>
                    </div>
                  </div>
                  <div class="list-box money-row">
                    <h4 class="summation-label">
                      <p>合计</p>
                    </h4>
                    <div class="list list-normal money">
                      <span class="red">{{ticket.tTotal}}</span>
                      <span class="unit">元</span>
                    </div>
                  </div>
                  <div class="list-box">
                    <div class="botton-group">
                      <!--<button class="choose-seat-btn">选座购票</button>-->
                      <button class="buyticket-top" type="button" @click="goPay">立即购票</button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </Card>
        </Row>
        <Row class="detail">
          <Col span="17">
          <Card>
            <Tabs value="message" type="card">
              <TabPane label="演出信息" name="message">
                <div class="message-content">
                  <iframe id="miframe" :srcdoc='concert.content' frameborder="0" width="100%" scrolling="no" :height="iframeHeight" @load="setIframeHeight"></iframe>
                </div>
              </TabPane>
              <TabPane label="精彩剧评" name="comment">
                <div style="margin-right:5%;">
                  <Form ref="showComment" :model="showComment" :label-width="60">
                    <FormItem label="写剧评:">
                      <Input v-model="showComment.comment" placeholder="剧评..."></Input>
                    </FormItem>
                    <FormItem label="评分:">
                      <Rate show-text allow-half v-model="showComment.rate">
                        <span style="color: #f5a623">{{ showComment.rate }}</span>
                      </Rate>
                      <Button type="info" @click="postComment" shape="circle" size="large"
                              style="float:right; padding: 6px 30px 7px 30px;">发布
                      </Button>
                    </FormItem>
                  </Form>
                  <div class="comment-list">
                    <ul>
                      <li v-for="item in allComments">
                        <mcomment :key="item.id" :item="item"></mcomment>
                      </li>
                    </ul>
                  </div>
                </div>
              </TabPane>
              <TabPane label="其他" name="others">其他</TabPane>
            </Tabs>
          </Card>
          </Col>
          <Col span="6" style="margin-left:20px;">
          <Card style="width:100%;">
            <p slot="title">
              <Icon type="fireball"></Icon>
              推荐
            </p>
            <ul style="min-height:750px;">
              <li v-for="item in items">
                <mbox :item="item"></mbox>
              </li>
            </ul>
          </Card>
          </Col>
        </Row>
        </Col>
      </Row>
    </div>
    <mfooter></mfooter>
  </div>
</template>

<script>
  import mtag from "@/components/mtag";
  import mbox from "@/components/mbox";
  import mcomment from "@/components/mcomment";
  import mheader from "@/components/mheader";
  import mfooter from "@/components/mfooter";
  import Cookies from "js-cookie";

  export default {
    name: "Content",
    components: {
      mtag,
      mbox,
      mcomment,
      mheader,
      mfooter,
    },
    data() {
      return {
        iframeHeight: 500,
        showComment: {
          comment: "",
          rate: 0
        },
        allComments: [],
        showRate: 4.5,
        tagv: "可选座",
        item: {},
        customer: {},
        ticket:{
          tConcert: '',
          tSession:'',
          tPrice: '',
          tCombineId: '',
          tSeats:[],
          tNumber:0,
          tTotal: 0,
        },
        concert: {
          title: '',
          poster: '',
          tags: [],
          place: '',
          shortDesc: '',
          content: '',
          concertTime: [],
          seatType: "0",
          seatMapId: "",
          seats: '',
          type: "",
          minPrice: 0,
          beginOn: "",
          faceValues: [],
          status: '0'
        },
        items: [
          {
            image: "https://img1.tking.cn/assets/img/DGXSX7b2j6.jpg",
            title: "琴弦上的对白——德国莱比锡弦乐四重奏成立30周年纪念巡演",
            link: "http://piao.damai.cn/141612.html",
            time: "2018.05.20 20:00",
            place: "珠海华发中演大剧院-音乐厅",
            rate: 5.5,
            price: 100
          },
          {
            image: "https://img1.tking.cn/assets/img/DGXSX7b2j6.jpg",
            title: "琴弦上的对白——德国莱比锡弦乐四重奏成立30周年纪念巡演",
            link: "http://piao.damai.cn/141612.html",
            time: "2018.05.20 20:00",
            place: "珠海华发中演大剧院-音乐厅",
            rate: 5.5,
            price: 100
          },
          {
            image: "https://img1.tking.cn/assets/img/DGXSX7b2j6.jpg",
            title: "琴弦上的对白——德国莱比锡弦乐四重奏成立30周年纪念巡演",
            link: "http://piao.damai.cn/141612.html",
            time: "2018.05.20 20:00",
            place: "珠海华发中演大剧院-音乐厅",
            rate: 9.5,
            price: 100
          },
          {
            image: "https://img1.tking.cn/assets/img/DGXSX7b2j6.jpg",
            title: "琴弦上的对白——德国莱比锡弦乐四重奏成立30周年纪念巡演",
            link: "http://piao.damai.cn/141612.html",
            time: "2018.05.20 20:00",
            place: "珠海华发中演大剧院-音乐厅",
            rate: 5.5,
            price: 100
          }
        ]
      };
    },
    methods: {
      setIframeHeight() {
        let miframe = document.getElementById("miframe");
        let iframeWin = miframe.contentDocument.parentWindow || miframe.contentWindow;
        this.iframeHeight = iframeWin.document.body.scrollHeight || iframeWin.document.documentElement.scrollHeight;
      },
      postComment() {
        this.$axios({
          method: 'post',
          url: '/api/comment',
          data: {
            comment: {
              customerId: this.customer.id,
              concertId: this.concert.id,
              comment: this.showComment.comment,
              score: this.showComment.rate,
            }
          }
        }).then(res => {
          this.loadComments();
        });
        console.log(this.showComment)
      },
      loadComments() {
        this.$axios({
          method: 'get',
          url: '/api/comment',
          params: {
            customerId: this.customer.id,
            concertId: this.concert.id,
          }
        }).then(res => {
          this.allComments = res.data.result;
          console.log(res)
        });
      },
      init() {
        let id = this.$route.params.id;
        if (Cookies.get('customer') !== undefined) {this.customer = JSON.parse(Cookies.get('customer'))}
        if (id) {
          this.$axios({
            method: 'get',
            url: `/api/concert/${id}`,
          }).then((res) => {
            let data = res.data;
            this.concert = data.result[0];
            this.concert.tags = this.concert.tags? this.concert.tags.split(','):[];
            this.loadImage(this.concert.poster);
            this.loadConcertTime();
            this.loadFaceValues();
            this.loadComments();
            this.loadTagListData();
          });
        }
      },
      loadConcertTime() {
        this.$axios({
          method: 'get',
          url: `/api/concertTime/${this.concert.id}`,
        }).then((res) => {
          let data = res.data;
          const concertTime = data.result? data.result:[];
          concertTime.forEach(e => {
            e.time = JSON.parse(e.time);
          });
          this.$set(this.concert, "concertTime", concertTime);
        }).catch(e => {
          console.log("can't load concert time"+e);
          this.$set(this.concert, "concertTime", []);
        });
      },
      loadFaceValues() {
        this.$axios({
          method: 'get',
          url: `/api/faceValues/${this.concert.id}`,
        }).then((res) => {
          let data = res.data;
          const faceValues = data.result? data.result:[];
          this.$set(this.concert, "faceValues", faceValues);
        }).catch(e => {
          console.log("can't load face values"+e);
          this.$set(this.concert, "faceValues", []);
        });
      },
      loadImage(imageId) {
        this.$axios({
          method: 'get',
          url: `/api/image/${imageId}`,
        }).then(res => {
          this.concert.poster = res.data;
        });
      },
      loadSeatMap() {},
      changeTicket(val) {
        this.ticket.tTotal = this.ticket.tPrice * this.ticket.tNumber;
      },
      loadTagListData() {
        this.$axios({
          method: 'post',
          url: '/api/tags',
          data: {
            codes: this.concert.tags
          }
        }).then(res => {
          this.concert.tags = res.data.result;
        });
      },
      goPay() {
        this.setToItem();
        this.$router.push({
          name: 'Pay',
          params: {type: 0, id: this.concert.id},
        });
      },
      setToItem() {
        this.item['id'] = this.concert.id;
        this.item['type'] = 0;
        this.item['title'] = this.concert.title;
        this.item['detail'] = this.ticket.tSession + ',' + this.ticket.tSeats;
        this.item['combineId'] = this.ticket.tCombineId;
        this.item['price'] = this.ticket.tPrice;
        this.item['count'] = this.ticket.tNumber;
        this.item['total'] = this.ticket.tTotal;
        sessionStorage.setItem('item', JSON.stringify(this.item));
      }
    },
    mounted() {
      this.init();
    }
  };
</script>

<style scoped>
  .message-content > html > body {
    width: 100%;
  }

  .content {
    margin: 10px 0px;
  }

  .container {
    margin-top: 50px;
  }

  .detail {
    margin-top: 50px;
  }

  .show-poster {
    font-size: 12px;
    color: #8f8d8f;
    width: 249px;
    display: inline-block;
    vertical-align: top;
  }

  .poster {
    margin: -45px 0px 0px -40px;
    width: 250px;
    height: 350px;
    border-radius: 8px;
    background-color: #fff;
    box-shadow: 0 4px 16px 0 #aaa;
  }

  .show-count {
    color: #999999;
    font-size: 15px;
    margin-top: 5px;
  }

  .show-info {
    font-size: 12px;
    color: #000;
    display: inline-block;
    width: 60%;
  }

  .show-desc {
    font-size: 14px;
    color: #494949;
    line-height: 20px;
    margin: 10px 0px;
  }

  .money {
    font-size: 26px;
    color: #ff6c69;
    line-height: 34px;
  }

  .list-box {
    color: #333;
    font-size: 12px;
    margin: 5px auto;
  }

  .list-box h4 {
    display: inline-block;
    padding-right: 20px;
    vertical-align: top;
    height: 36px;
    line-height: 36px;
    font-size: 16px;
    font-weight: 500;
    color: #494949;
  }

  .list-normal {
    margin-top: 3px;
    display: inline-block;
    width: 85%;
  }

  .botton-group button {
    border: none;
    padding: 0;
    margin: 10px 20px 20px 0px;
    outline-style: none;
    width: 168px;
    line-height: 44px;
    font-size: 18px;
    font-weight: 500;
    color: #fff;
    text-align: center;
    cursor: pointer;
    height: 44px;
    border-radius: 44px;
    filter: progid:DXImageTransform.Microsoft.gradient(
      GradientType=0,
      startColorstr=#ff785b,
      endColorstr=#ff3869
    );
  }

  .buyticket-top {
    background-color: #fd6857;
  }

  .choose-seat-btn {
    background-color: #f6ca2d;
  }

  .ivu-radio-group-button .ivu-radio-wrapper {
    font-size: 15px;
    border: 1px solid #ddde;
    border-radius: 100px !important;
    margin: 2px 5px;
  }

  .ivu-radio-group-button .ivu-radio-wrapper-checked {
    /* background: #fff; */
    border: 1px solid;
    border-left: 0px; /* color: #2d8cf0; */ /* box-shadow: -1px 0 0 0 #2d8cf0; */ /* z-index: 1; */
  }

  .ivu-radio-group-button .ivu-radio-wrapper:before,
  .ivu-radio-group-button .ivu-radio-wrapper:after {
    width: 0px;
  }

  .ivu-radio-group-button .ivu-radio-wrapper-checked:first-child {
    border: 1px solid;
    /* border-left: 1px; */
  }

  .ivu-radio-group-button .ivu-radio-wrapper:first-child {
    border-radius: 100px !important;
  }

  .ivu-radio-group-button .ivu-radio-wrapper:last-child {
    border-radius: 100px !important;
  }
</style>
